<template>
    <div class="container" v-if="app">
        <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item>
                <a :href="urls.home" data-nuxt-link>Home</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a :href="urls.type" data-nuxt-link>{{ type }}</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ app.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="content">
            <div class="details">
                <!-- app详细信息 -->
                <div class="current">
                    <div class="app-icon">
                        <img :src="app.icon || '/img/default.png'" :alt="app.name">
                    </div>
                    <div class="current-info">
                        <div class="current-title">{{ app.name }}</div>
                        <div class="category-name">{{ app.category }}</div>
                        <div class="current-list">
                            <div class="rating">
                                <div class="rating-value"><span style="color: #666666;">★</span> {{ app.rating }}</div>
                                <div class="rating-text">RATING</div>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="download">
                                <div class="download-count">
                                    <svg-icon name="download"></svg-icon>
                                    {{ app.downloads }}</div>
                                <div class="download-text">DOWNLOADS</div>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="age">
                                <div class="age-icon">
                                    <svg-icon name="age"></svg-icon>
                                    {{ app.age }}
                                </div>
                                <div class="age-text">AGE</div>
                            </div>
                            <div class="safety">
                                <svg-icon name="safety"></svg-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 移动端 -->
                <div class="current-list-mobile">
                    <div class="rating">
                        <div class="rating-value"><span style="color: #666666;">★</span> {{ app.rating }}</div>
                        <div class="rating-text">RATING</div>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="download">
                        <div class="download-count">
                            <svg-icon name="download"></svg-icon>
                            {{ app.downloads }}</div>
                        <div class="download-text">DOWNLOADS</div>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="age">
                        <div class="age-icon">
                            <svg-icon name="age"></svg-icon>
                            {{ app.age }}
                        </div>
                        <div class="age-text">AGE</div>
                    </div>
                    <div class="safety">
                        <svg-icon name="safety"></svg-icon>
                    </div>
                </div>

                <GoogleAdCollect
                    id="6711270622"
                    adm-id="div-gpt-ad-1747194797901-0"
                    name="APK_Detail_Display_1"
                    parent-page="Details"
                    @adSuccess="handleAdSuccess"
                    @adError="handleAdError"
                />
                <!-- 按钮 -->
                <div v-if="channel !== '7849026233'" class="buttons">
                    <a :href="urls.detail" class="download-latest" @click="handleClickDownload(app.name)">
                        <svg-icon name="download-latest"></svg-icon>
                        Download Latest APK</a>
                    <!-- <el-button class="check-all-versions">
                        <svg-icon name="search"></svg-icon>
                        Check All Versions</el-button> -->
                </div>

                <!-- Screenshots -->
                <Screenshots :screenshots="app.screenshots" />

                <GoogleAdCollect
                    id="4358362030"
                    adm-id="div-gpt-ad-1747194850400-0"
                    name="APK_Detail_Display_2"
                    parent-page="Details"
                    @adSuccess="handleAdSuccess"
                    @adError="handleAdError"
                />

                <!-- 按钮 -->
                <div v-if="channel === '7849026233'" class="buttons">
                    <a :href="urls.detail" class="download-latest" @click="handleClickDownload(app.name)">
                        <svg-icon name="download-latest"></svg-icon>
                        Download Latest APK</a>
                    <!-- <el-button class="check-all-versions">
                        <svg-icon name="search"></svg-icon>
                        Check All Versions</el-button> -->
                </div>

                <!-- 关于这个应用 -->
                <div class="about-this-app">
                    <div class="title">About This App</div>
                    <div class="about-list">
                        <div class="info-item" v-for="(item, index) in aboutList" :key="index">
                            <svg-icon :name="item.icon"></svg-icon>
                            <div class="text">
                                <div class="label">{{ item.label }}</div>
                                <div class="value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="features">
                    <div class="features-item" v-for="(item, featureIndex) in app.features" :key="featureIndex">
                        <div class="features-item-title" :style="mapColor(featureIndex)">{{ item.type }}</div>
                        <div class="features-item-list">
                            <div class="features-item-list-item" 
                                :style="{ borderLeft: `4px solid ${mapColor(featureIndex).background}` }" 
                                v-for="(text, index) in item.items" 
                                :key="index"
                            >
                                <div class="features-item-list-item-title">{{ text.title }}</div>
                                <div class="features-item-list-item-description">{{ text.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <Rating :rating="Number(app.rating)" />

                <Faq :app-name="app.name" />

                <GoogleAdCollect
                    id="1458943947"
                    adm-id="div-gpt-ad-1747195049479-0"
                    name="APK_Detail_Display_3"
                    parent-page="Details"
                    @adSuccess="handleAdSuccess"
                    @adError="handleAdError"
                />
                <RelatedApps :category="app.category" />
            </div>
            <TopDownloads adSlot='3893535593' admId='div-gpt-ad-1747195110951-0' name='APKBox_Detail_Display_4' parent-page="Detail" />

        </div>

        <AdsAnchor parent-page="Details" />
    </div>
</template>

<script setup>
import GoogleAdCollect from '@/components/GoogleAdCollect.vue'
import AdsAnchor from '@/components/AdsAnchor.vue'
import TopDownloads from '@/components/TopDownloads.vue'
import RelatedApps from '@/components/RelatedApps.vue'
import Screenshots from '@/components/Screenshots'
import Faq from '@/components/Faq'
import Rating from '@/components/Rating.vue'
// import defaultImg from '~/public/img/default.png'
import { useFetch, useRoute } from '#app'
import { ref, computed, onMounted } from 'vue'
import { homeParams } from '~/utils/homeParams'

definePageMeta({
    title: 'Details',
    layout: 'default'
})

const route = useRoute()
const type = route.query.type || ''
const slug = route.query.slug

// 获取地址栏的Channel参数
const channel = route.query.channel

const { data: appData } = await useFetch(`/api/app/${slug}`)
const app = computed(() => appData.value)

// 存储所有生成的 URL
const urls = ref({
    home: '',
    type: '',
    detail: ''
})

const generateUrls = () => {
    if (!process.client) return

    // 生成首页 URL
    urls.value.home = `/?${new URLSearchParams(homeParams()).toString()}`
    
    // 生成分类页 URL
    urls.value.type = `/${type}?${new URLSearchParams(homeParams()).toString()}`
    
    // 生成详情页 URL
    const queryParams = {
        type: type,
        slug: slug,
        ...homeParams()
    }
    urls.value.detail = `/download?${new URLSearchParams(queryParams).toString()}`
}

// 在组件挂载后生成所有 URL
onMounted(() => {
    generateUrls()
    logEvent('App_Detail_Page_Show', {
        App: app.value?.name,
    })
})

const handleClickDownload = (name) => {
    logEvent('Click_Download', {
        App: name,
    })
}
const aboutList = computed(() => [
    {
        icon: 'icon-name',
        label: 'Name',
        value: app.value?.name
    },
    {
        icon: 'icon-category',
        label: 'Category',
        value: app.value?.category
    },
    {
        icon: 'icon-price',
        label: 'Price',
        value: app.value?.price
    },
    {
        icon: 'icon-safety',
        label: 'Safety',
        value: app.value?.safety
    },
    {
        icon: 'icon-developer',
        label: 'Developer',
        value: app.value?.developer
    },
    {
        icon: 'icon-version',
        label: 'Version',
        value: app.value?.version
    },
    {
        icon: 'icon-update',
        label: 'Update',
        value: app.value?.update_date
    }
])

const mapColor = (index) => {
    switch (index) {
        case 0:
            return {
                color: '#0097DD',
                background: '#D6F2FF'
            }
        case 1:
            return {
                color: '#0B8949',
                background: '#CEFFE6'
            }
        case 2:
            return {
                color: '#E92930',
                background: '#FFE4E5'
            }
        case 3: 
            return {
                color: '#FF8C1A',
                background: '#FFEDD6'
            }
    }
}
const handleAdSuccess = () => {
    console.log('广告加载成功')
}
const handleAdError = () => {
    console.log('广告加载失败')
}
</script>

<style scoped lang="scss">
.title {
    @include title;
}
.container {
    .breadcrumb {
        @media screen and (max-width: 768px) {
            display: none;
        }
    }
    .content {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 5rem;
        max-width: 100%;
        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 0;
        }
        .details {
            max-width: 100%;
            overflow: hidden;

            .current {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1.2rem;
                background-color: #F6F6F6;
                margin: 1rem 0;
                border-radius: 1rem;
                width: 100%;
                .app-icon {
                    width: 100px;
                    height: 100px;
                    img {
                        width: 100%;
                        border-radius: .8rem;
                        object-fit: cover;
                        background-image: url('/img/default.png');
                        background-size: 100px 100px;
                        background-position: center;
                    }
                }
                .current-info {
                    font-size: 1.5rem;
                    display: flex;
                    flex-direction: column;
                    align-items: baseline;
                    gap: .5rem;
                    .current-title {
                        font-size: 2rem;
                        font-weight: 600;
                    }
                    .category-name {
                        font-size: 1rem;
                        font-weight: 600;
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #EEEEEE;
                        padding: 2px 8px;
                        color: #F78B17;
                        text-align: center;
                    }
                    .current-list {
                        display: flex;
                        align-items: center;
                        gap: 1rem;
                        .rating,
                        .download,
                        .age {
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            font-size: .8rem;
                            font-weight: 400;
                        }
                        .rating-value {
                            color: #F75867;
                        }
                        .rating-text, .download-text, .age-text {
                            font-weight: 400;
                            color: #666666;
                        }
                        .age-icon, .download-count, .rating-value {
                            display: flex;
                            align-items: center;
                            gap: .2rem;
                        }
                        .safety {
                            background: #FFFFFF;
                            border-radius: 9px;
                            border: 1px solid #EEEEEE;
                            padding: .5rem;
                        }
                        @media screen and (max-width: 768px) {
                            display: none;
                        }
                    }
                }
                @media screen and (max-width: 768px) {
                    background-color: #fff;
                    margin: 1rem 0;
                    padding: 0;
                }
            }
            .current-list-mobile {
                display: none;
                @media screen and (max-width: 768px) {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                    .rating,
                    .download,
                    .age {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        font-size: .8rem;
                        font-weight: 400;
                    }
                    .rating-value {
                        color: #F75867;
                    }
                    .rating-text, .download-text, .age-text {
                        font-weight: 400;
                        color: #666666;
                    }
                    .age-icon, .download-count, .rating-value {
                        display: flex;
                        align-items: center;
                        gap: .2rem;
                    }
                    .safety {
                        background: #FFFFFF;
                        border-radius: 9px;
                        border: 1px solid #EEEEEE;
                        padding: .5rem;
                    }
                }
            }
            .buttons {
                display: flex;
                gap: 1rem;
                margin: 1rem;
                @media screen and (max-width: 768px) {
                    flex-direction: column;
                }
                .download-latest {
                    background: #F78B17;
                    color: #FFF8F1;
                    animation: pulse 1s infinite;
                    width: 100%;
                    border-radius: 5rem;
                    padding: .6rem;
                    border: none;
                    font-weight: 600;
                    font-size: 1.2rem;
                    margin: 0;
                    display: flex;
                    justify-content: center;
                    text-decoration: none;
                    @media screen and (max-width: 768px) {
                        padding: .6rem 0;
                    }
                }
                .check-all-versions {
                    width: 100%;
                    border-radius: 5rem;
                    padding: 1.5rem;
                    border: none;
                    font-weight: 600;
                    font-size: 1.2rem;
                    margin: 0;
                    background: #FFF8F1;
                    color: #F78B17;
                }
                .svg-icon-wrapper  {
                    margin-right: .5rem;
                }
            }
            .about-this-app {
                margin-top: 3rem;
                width: 100%;
                overflow: hidden;
                .about-list {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    gap: 1rem;
                    margin-top: 1rem;
                    @media screen and (max-width: 768px) {
                        grid-template-columns: 1fr 1fr;
                    }
                    .info-item {
                        display: flex;
                        align-items: center;
                        gap: .5rem;
                        background-color: #f6f6f6;
                        padding: .5rem;
                        border-radius: .2rem;
                        .svg-icon-wrapper {
                            font-size: 1.8rem;
                        }
                        .text {
                            display: flex;
                            flex-direction: column;
                            /* gap: .5rem; */
                            .label {
                                font-size: .6rem;
                                color: #666666;
                            }
                            .value {
                                font-weight: 500;
                                font-size: .8rem;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 13rem;
                                @media screen and (max-width: 768px) {
                                    max-width: 7rem;
                                }
                            }
                        }
                    }
                }
            }
            .features {
                margin: 2rem 0;

                .features-item {
                    margin-bottom: 2rem;

                    .features-item-title {
                        position: relative;
                        font-size: 1.2rem;
                        font-weight: 600;
                        padding: 0rem .4rem;
                        border-radius: .25rem;
                        display: inline-block;
                        margin-bottom: 1rem;
                        padding-right: 2rem;
                        &::after {
                            content: "";
                            position: absolute;
                            right: -1rem;
                            top: -.1rem;
                            height: 0;
                            border: 1rem solid #fff;
                            transform: rotate(-45deg);
                        }
                    }

                    .features-item-list {
                        .features-item-list-item {
                            margin-bottom: 1.5rem;
                            padding-left: 1rem;
                            /* position: relative; */
                            /* &::before {
                                content: '';
                                width: .2rem;
                                height: 100%;
                                display: inline-block;
                                margin-right: .5rem;
                                position: absolute;
                                top: 0;
                                left: -1rem;
                            } */

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .features-item-list-item-title {
                                font-size: 1.1rem;
                                font-weight: 600;
                                margin-bottom: .5rem;
                                color: #333;
                            }

                            .features-item-list-item-description {
                                font-size: 1rem;
                                line-height: 1.6;
                                color: #666;
                            }
                        }
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
</style>